<style>
  .el-dropdown-menu{
    width: 120px !important;
  }
</style>
<template>
  <div class="create_task">
    <div class="title">{{title}}</div>
    <div class="imp_box">
      <div class="Damon_content">
        <div class="con con1">
          <span class="con_title">标题</span>
          <input class="con_input" type="text" v-model="presentationTitle" placeholder="请填写8D报告标题" />
        </div>
        <div class="con con2">
          <div class="con2_div">
            <span class="con_title">选择问题等级</span>
            <el-dropdown @command="changeColor" placement="bottom" style="width: 100%">
              <span class="el-dropdown-link con2_input" :style='{color:color}'>
                 {{colorTitle}}<div class="triangle_border_down"></div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item,index) in colorList" :style='{color:item.color}' :key="index" :command="item">{{item.title}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="con2_div">
            <span class="con_title">选择指标</span>
            <div style="position: relative">
              <el-select v-model="target" placeholder="请选择指标" class="con2_input2">
                <el-option
                  v-for="item in targetList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              <div class="triangle_border_down sxj2"></div>
            </div>
          </div>
        </div>
        <div class="con con3">
          <span class="con_title">选择问题分类</span>
          <div style="position: relative">
            <el-cascader
              popper-class="zero_cascader"
              expand-trigger="hover"
              :placeholder="data_category"
              :options="proposalList"
              :clearable="true"
              :props="propData"
              v-model="category"
            style="width: 100%;height: 50px;line-height: 50px !important;">
            </el-cascader>
            <div class="triangle_border_down sxj2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="sc">
      <div class="buts">
        <el-button class="cancle" @click="cancle">取消</el-button>
        <el-button type="primary" @click="addPlant" class="sure" style="height: 40px">确认</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState,mapActions} from 'vuex'
  export default {
    props:['update8D','parEight'],
    data() {
      return {
        title:'',
        presentationTitle:'', //报告标题
        colorList:[
          {title:'红色',color:'#dc4444',level:'1'},
          {title:'橙色',color:'#ff8c1b',level:'2'},
          {title:'黄色',color:'#ffcd34',level:'3'},
          {title:'蓝色',color:'#3384dd',level:'4'}
        ],
        colorTitle:'请选择问题等级',
        color:'#cccccc',
        target:'',
        data_category:'请选择问题分类',
        propData: {
          label:'name',
          value:'name',
          children: 'data'
        },
        category: [],
      }
    },
    computed: {
      ...mapState([
        'plantList',
        'targetList',
        'proposalList',
      ]),
    },
    mounted(){
      let self = this
      if (self.update8D != undefined && self.update8D != null && self.update8D != ''){
        self.title = '修改8D报告'
        self.presentationTitle = self.update8D.edReport.title
        self.target = self.update8D.edReport.target
        //获取颜色
        for (let i = 0; i < self.colorList.length; i++){
          if (self.update8D.edReport.level == self.colorList[i].level){
            self.colorTitle = self.colorList[i].title
            self.color = self.colorList[i].color
          }
        }
        self.data_category = self.update8D.edReport.category
      } else {
        self.title = '添加8D报告'
        if (self.parEight != undefined){
          self.target = self.parEight.target
          self.data_category = self.parEight.category
          //获取颜色
          for (let i = 0; i < self.colorList.length; i++){
            if (self.parEight.level == self.colorList[i].level){
              self.colorTitle = self.colorList[i].title
              self.color = self.colorList[i].color
            }
          }
        }
      }
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //取消
      cancle(){
        let self = this
        self.upstate({key:'showNewEight',val:false})
        // self.upstate({key:'publicNowNode',val: 0})
        // self.upstate({key:'publicHaveNode',val: 0})
      },
      //确认
      addPlant(){
        let self = this
        if (self.presentationTitle != ''){
          if (self.colorTitle != '请选择问题等级') {
            if (self.target != '') {
              if (self.category.length > 0 || self.data_category != '') {
                self.upstate({key:'showNewEight',val:false})
                if (self.update8D == undefined) {
                  let level
                  for (let i = 0; i < self.colorList.length; i++) {
                    if (self.colorTitle == self.colorList[i].title){
                      level = self.colorList[i].level
                    }
                  }
                  let newCategory = ''
                  if (self.category.length > 0){
                    newCategory = self.category[2]
                  } else {
                    newCategory = self.data_category
                  }
                  let par = {
                    creator: localStorage.getItem('userName'),
                    data:{
                      category: newCategory,
                      config: '',
                      desc: '',
                      urgency: '',
                      level: level,
                      target: self.target,
                      title: self.presentationTitle,
                    },
                    type:'D0'
                  }
                  if (self.parEight != undefined){
                    let proposalId
                    if (self.parEight.proposalId != undefined && self.parEight.proposalId != null){
                      proposalId = self.parEight.proposalId
                      par.data.proposalId = proposalId
                    }
                  }
                  self.$http.post(self.conURL + 'mongo/api/eddocs',par).then(res => {
                    this.$notify({
                      title: '成功',
                      message: '8D文件创建成功',
                      type: 'success'
                    });
                    self.upstate({key:'publicHaveNode',val: 1})
                    self.upstate({key:'publicNowNode',val:0})
                    this.$router.push({
                      path: '/index/public_eightD',
                      query: {id:res.data.id,edReportId:res.data.edReportId,getNew:true}
                    })
                  })
                }else {
                  let level
                  for (let i = 0; i < self.colorList.length; i++) {
                    if (self.colorTitle == self.colorList[i].title){
                      level = self.colorList[i].level
                    }
                  }
                  let newCategory = ''
                  if (self.category.length > 0){
                    newCategory = self.category[2]
                  } else {
                    newCategory = self.data_category
                  }
                  let config = ''
                  let desc = ''
                  let urgency = ''
                  if (self.update8D.edDoc != undefined){
                    config = self.update8D.edDoc.data.config
                    desc = self.update8D.edDoc.data.desc
                    urgency =self.update8D.edDoc.data.urgency
                  }
                  let edReportId = ''
                  let id = ''
                  if (self.update8D.edReport.reportId != undefined && self.update8D.edReport.reportId.length > 0){
                    id = self.update8D.edReport.reportId[0]
                    edReportId = self.update8D.edReport.id
                  } else {
                    id = self.update8D.id
                    edReportId = self.update8D.edReportId
                  }
                  let par = {
                    creator: localStorage.getItem('userName'),
                    data:{
                      category: newCategory,
                      config: config,
                      desc: desc,
                      urgency: urgency,
                      level: level,
                      target: self.target,
                      title: self.presentationTitle,
                    },
                    id: id,
                    edReportId: edReportId,
                    type: 'D0'
                  }
                  let parNew = ''
                  self.$http.post(self.conURL + 'mongo/api/eddocs/update',par).then(res => {
                    this.$notify({
                      title: '成功',
                      message: '修改8D标题成功',
                      type: 'success'
                    });
                    parNew = res.data
                  }).catch(error => {
                    console.log(error)
                    this.$notify.error({
                      title: '错误',
                      message: '创建失败'
                    });
                  })
                  this.$emit('params', parNew)
                }
              } else {
                this.$notify({
                  title: '警告',
                  message: '请选择问题分类',
                  type: 'warning'
                });
              }
            } else {
              this.$notify({
                title: '警告',
                message: '请选择指标',
                type: 'warning'
              });
            }
          } else {
            this.$notify({
              title: '警告',
              message: '请选择问题等级',
              type: 'warning'
            });
          }
        } else {
          this.$notify({
            title: '警告',
            message: '标题不能为空',
            type: 'warning'
          });
        }
      },
      //选择问题等级
      changeColor(value){
        this.colorTitle=value.title;
        this.color=value.color;
        this.level=value.level;
      },
    }
  }
</script>
<style lang="less">
  .create_task{
    position: fixed;
    z-index: 10;
    top: 0px;
    right: 0px;
    width: 661px;
    height: 100%;
    background: #fff;
    -webkit-box-shadow: 0 10px 23px 2px rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.15);
    box-shadow: 0 10px 23px 2px rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.15);
    .title{
      height: 74px;
      line-height: 74px;
      font-size: 20px;
      color: #222222;
      padding-left: 30px;
      border-bottom: 1px solid #e5e5e5;
    }
    overflow-y: auto;
    .Damon_content{
      display: flex;
      flex-direction: column;
      padding: 0 30px;
      box-sizing: border-box;
      .con{
        display: flex;
        flex-direction: column;
        .con_title{
          font-size: 16px;
          font-family: 微软雅黑;
          color: #666666;
          margin-bottom: 13px;
        }
        .con_input{
          width: 100%;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          font-family: 微软雅黑;
          padding-left: 13px;
          box-sizing: border-box;
          border: 1px solid #e5e5e5;
          color: #222222;
        }
        .con_input::-webkit-input-placeholder{
          color: #cccccc;
        }    /* 使用webkit内核的浏览器 */
        .con_input:-moz-placeholder{
          color: #cccccc;
        }                  /* Firefox版本4-18 */
        .con_input::-moz-placeholder{
          color: #cccccc;
        }                  /* Firefox版本19+ */
        .con_input:-ms-input-placeholder{
          color: #cccccc;
        }           /* IE浏览器 */
      }
      .con1{
        padding-top: 30px;
        padding-bottom: 30px;
        box-sizing: border-box;
        border-bottom: 1px dashed #e5e5e5;
      }
      .con2{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .con2_div{
          width: 45%;
          display: flex;
          flex-direction: column;
          margin-top: 27px;
          margin-bottom: 27px;
          position: relative;
          .con2_input{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border: 1px solid #e5e5e5;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            font-family: 微软雅黑;
            padding: 0 13px;
            box-sizing: border-box;
            color: #222222;
          }
          .con2_input2{
            width: 100%;
            input{
              width: 100%;
              height: 50px;
              font-size: 16px;
              font-family: 微软雅黑;
              padding: 0 13px;
              box-sizing: border-box;
              color: #222222;
              border-radius: 0;
            }
          }
        }
      }
      .con3{
        input{
          height: 50px !important;
          line-height: 50px !important;
        }
      }
      .triangle_border_down{
        width:0;
        height:0;
        border-width:7px 5px 0;
        border-style:solid;
        border-color:#aaaaaa transparent transparent;
        margin-top: 10%;
        position:relative;
      }
      .sxj2{
        margin: auto 0;
        position: absolute;
        right: 13px;
        top: 0;
        bottom: 0;
      }
    }
    .sc{
      border-top: 1px solid #e5e5e5;
      width: 100%;
      height: 60px;
      position: absolute;
      bottom: 0px;
      z-index: 10;
      text-align: center;
      background: #fafafa;
      border-top: 1px solid #e5e5e5;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .buts{
        margin: auto 0;
        display: flex;
        flex-direction: row;
      }
    }
  }
</style>
